<template>
  <div style="width: 100%;height: 400px;overflow: hidden;" ref="user_login_echarts"></div>
</template>

<script>
import time from "../utils/time"
import {getUserLoginTime} from "../utils/api";
const echarts = require('echarts');
export default {
  name: "UserLoginEcharts",
  data(){
    return {
      XArr:[],
      YArr:[]
    }
  },
  methods: {
    initCharts () {
      let myChart = echarts.init(this.$refs.user_login_echarts, null);
      window.onresize = function () {
        myChart.resize();
      };
      // 绘制图表
      myChart.setOption({
        title: {
          text: '用户登录情况',
          left: '5%',
          top:'3%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.XArr
        },
        yAxis: {
          type: 'value'
        },
        series:
          {
            name: '登录人数',
            data: this.YArr,
            type: 'line',
            smooth: true,
            /*label: {
              show: false,
              position: 'top',
              textStyle: {
                fontSize: 16
              }
            },*/
            /*emphasis:{
              label:{
                show:true
              }
            }*/

          }
      });
    }
  },
  mounted () {
    getUserLoginTime().then(respose=>{
      if(respose.status==200){
        let arr = [...respose?.body];
        let obj = {};
        arr.map(v=>{
          v.drsj=time.timestampToTime(v.drsj,3);
          obj[v.drsj]?obj[v.drsj]++:obj[v.drsj]=1
        })
        this.XArr=Object.keys(obj);
        this.YArr=Object.values(obj);
        this.initCharts();
      }else{
        this.$message.error(respose?.msg);
      }
    })
  }
}
</script>

<style scoped>

</style>
